<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-info">
            <form id="operlog-form">
                <div class="select-list gd">
                    <ul>
                        <li>
                            员工姓名：<input type="text" name="userId"/>
                        </li>
                        <li>
                            部门：<input type="text" name="deptId"/>
                        </li>
                        <li>
                            周几：
                            <select name="week" style="width: 100px">
                                <option value=""> - -</option>
                                <option value="一">一</option>
                                <option value="二">二</option>
                                <option value="三">三</option>
                                <option value="四">四</option>
                                <option value="五">五</option>
                                <option value="六">六</option>
                                <option value="日">日</option>
                            </select>
                        </li>
                        <li class="select-time">
                            <label>打卡日期： </label>
                            <input type="text" class="time-input" style="width: 150px" id="beginTime" placeholder="开始时间"
                                   name="beginTime" lay-key="1">
                            <span>-</span>
                            <input type="text" class="time-input" style="width: 150px" id="overTime" placeholder="结束时间"
                                   name="overTime" lay-key="2">
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm"
                               onclick="$.table.search($('form').attr('id'))"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <!--<a class="btn btn-success btn-rounded btn-sm"-->
                            <!--onclick="$.table.exportExcel($('form').attr('id'))"><i class="fa fa-download"></i>&nbsp;下载</a>-->
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group hidden-xs" id="toolbar" role="group">
            <a class="btn btn-outline btn-danger btn-rounded" onclick="$.operate.batRemove()"
               shiro:hasPermission="attend:del">
                <i class="fa fa-trash-o"></i> 删除
            </a>
        </div>
        <div class="col-sm-12 select-info order-table">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<div id="workTime" style="display: none" th:object="${workShif}">
    <div class="col-xs-6">
        <table class="table">
            <tr>
                <td>--</td>
                <th>签到时间范围</th>
                <th>上下班时间</th>
                <th>签到时间</th>
            </tr>
            <tr>
                <td colspan="4">上午:</td>
            </tr>
            <tr>
                <th>早班打卡</th>

                <td>
                    <span th:text="*{#dates.format(attendMorStartTime,'HH:mm:ss')}"></span>
                    -
                    <span th:text="*{#dates.format(attendMorendTime,'HH:mm:ss')}"></span>
                </td>
                <td th:text="*{#dates.format(workStartTimeMor,'HH:mm:ss')}"></td>
                <td class="attendMorStart"></td>
            </tr>
            <tr>
                <th>下班打卡</th>

                <td>
                    <span th:text="*{#dates.format(attendMorLeaveStartTime,'HH:mm:ss')}"></span>
                    -
                    <span th:text="*{#dates.format(attendMorLeaveEndTime,'HH:mm:ss')}"></span>
                </td>
                <td th:text="*{#dates.format(workEndTimeMor,'HH:mm:ss')}"></td>

                <td class="attendMorleave"></td>
            </tr>

            <tr>
                <td colspan="6">下午:</td>
            </tr>

            <tr>
                <th>上班打卡</th>

                <td>
                    <span th:text="*{#dates.format(attendAfterNoonStartTime,'HH:mm:ss')}"></span>
                    -
                    <span th:text="*{#dates.format(attendAfterNoonendTime,'HH:mm:ss')}"></span>
                </td>
                <td th:text="*{#dates.format(workStartTimeAfterNoon,'HH:mm:ss')}"></td>
                <td class="attendAfterStart"></td>
            </tr>
            <tr>
                <th>下班打卡</th>

                <td>
                    <span th:text="*{#dates.format(attendAfterLeaveStartTime,'HH:mm:ss')}"></span>
                    -
                    <span th:text="*{#dates.format(attendAfterLeaveEndTime,'HH:mm:ss')}"></span>
                </td>
                <td th:text="*{#dates.format(workEndTimeAfterNoon,'HH:mm:ss')}"></td>
                <td class="attendAfterleave"></td>
            </tr>
        </table>
    </div>
</div>


<div th:include="include :: footer"></div>

<script th:inline="javascript">

    var prefix = "/attend";
    var updateFlag = [[${@permission.hasPermi('attend:del')}]];
    var addFlag = [[${@permission.hasPermi('attend:add')}]];

    //早上打卡时间
    var morStart = "morStart";
    //早上下班打卡时间
    var morleave = "morleave";
    //下午上班
    var noonStart = "noonStart";
    //下午下班
    var noonleave = "noonleave";

    var btn = {
        CalculationAttend: function (id, $detail) {

            //这一步就是相当于在当前点击列下新创建一个table
            var html = "";
            html += "<div class='container' style='margin: 30px'>";
            html += "<div class='row' th:object='${workShif}'>";
            html += $("#workTime").html();
            html += "<div class='col-xs-6'>";
            html += "<table class='table'>";
            html += "<tr>";
            html += "<th>是否正常</th>";
            html += "<th>总计</th>";
            html += "</tr>";
            html += '<tr><td colspan="2">上午</td></tr>';

            $.ajax({
                type: "post",
                url: "/attend/CalculationAttend",       //子表请求的地址
                data: {attendId: id},//我这里是点击父表后，传递父表列id和nama到后台查询子表数据
                async: false,           //很重要，这里要使用同步请求
                success: function (data) {
                    //alert(JSON.stringify(data))
                    //早上上班打卡
                    if (data.morStart > 0) {
                        html += '<tr><td style="color:red">迟到</td><td>迟到：' + btn.minuteToHours(data.morStart) + '</td></tr>';
                    } else if (data.morStart < 0) {
                        html += '<tr><td style="color:green">正常</td><td>提前：' + btn.minuteToHours(data.morStart) + '</td></tr>';
                    } else {
                        html += '<tr><td style="color:red">未签</td><td></td></tr>';
                    }

                    //早上下班打卡
                    if (data.morleave > 0) {
                        html += '<tr><td style=color:red>异常</td><td>' + btn.minuteToHours(data.morleave) + '</td></tr>';
                    } else if (data.morleave < 0) {
                        html += '<tr><td style="color:green">正常</td><td></td></tr>';
                    }else{
                        html += '<tr><td style=color:red>未签</td><td></td></tr>';
                    }


                    html += '<tr><td colspan="2">下午</td></tr>';

                    //下午上班打卡
                    if (data.noonStart > 0) {
                        html += '<tr><td style="color:red">异常</td><td></td></tr>';
                    } else if (data.noonStart < 0) {
                        html += '<tr><td style="color:green">正常</td><td>提前：' + btn.minuteToHours(data.noonStart) + '</td></tr>';
                    }else{
                        html += '<tr><td style=color:red>未签</td><td></td></tr>';
                    }
                    //下午下班打卡
                    if (data.noonleave > 0) {
                        html += '<tr><td style="color:red">异常</td><td>'+btn.minuteToHours(data.noonleave)+'</td></tr>';
                    } else if (data.noonleave < 0) {
                        html += '<tr><td style="color:green">正常</td><td></td></tr>';
                    }else{
                        html += '<tr><td style=color:red>未签</td><td></td></tr>';
                    }

                    html += '</table>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    $detail.html(html); // 关键地方
                }
            });

        },
        minuteToHours: function (minute) {
            var time = Math.abs(minute);
            if (minute > 60) {
                return Math.floor((time / 60) * 100) / 100 + "/时";
            }
            return time + "/分";
        }
    }


    $('#bootstrap-table').bootstrapTable('destroy').bootstrapTable({
        url: '/attend/tableList',
        detailView: true,
        pagination: true,
        pageSize: 10,
        pageList: [10, 25, 50, 100],
        showRefresh: true,
        showToggle: true,
        showColumns: true,
        showExport: true,
        buttonsAlign: 'right',
        iconSize: "outline",
        toolbar: "#toolbar",
        sidePagination: "server", //服务端分页
        toolbarAlign: 'left',
        idField: 'id',
        columns: [
            {
                checkbox: true
            },
            {
                field: 'id',
                title: '编号',

            },
            {
                field: 'userId',
                title: '员工',
                formatter: function (value, row) {
                    return row.user.name
                }
            },
            {
                field: 'deptId',
                title: '部门',
                formatter: function (value, row) {
                    return row.dept.deptName
                }
            },
            {
                field: 'currDate',
                title: '日期',
                sortable: true,
                formatter: function (value) {
                    return $.common.dateFormatToDate(value);
                }
            },
            {
                field: 'week',
                title: '周几',
                visible: true
            },
            {
                field: 'attendMorStart',
                title: 'A.M 上班签到时间',
                align:'center',
                formatter: function (value) {
                    if (value == null) {
                        return '<span class="badge badge-danger">未签到</span>';
                    }
                    return $.common.dateFormatGetTimeSort(value);
                }
            },
            {
                field: 'attendMorLeave',
                title: 'A.M 下班签到时间',
                align:'center',
                formatter: function (value) {
                    if (value == null) {
                        return '<span class="badge badge-danger">未签到</span>';
                    }
                    return $.common.dateFormatGetTimeSort(value);
                }
            },
            {
                field: 'attendNoonStart',
                title: 'P.M 上班签到时间',
                align:'center',
                formatter: function (value) {
                    if (value == null) {
                        return '<span class="badge badge-danger">未签到</span>';
                    }
                    return $.common.dateFormatGetTimeSort(value);
                }
            },
            {
                field: 'attendNoonLeave',
                title: 'P.M 下班签到时间',
                align:'center',
                formatter: function (value) {
                    if (value == null) {
                        return '<span class="badge badge-danger">未签到</span>';
                    }
                    return $.common.dateFormatGetTimeSort(value);
                }
            },
            {
                field: 'status',
                title: '状态',
                formatter: function (value) {
                    if (value == 0) {
                        return '<span class="badge badge-success">正常</span>'
                    }
                    return '<span class="badge badge-danger">异常</span>';
                }
            },
            {
                title: '操作',
                align: 'center',
                formatter: function (value, row, index) {
                    var actions = [];
                    actions.push('<a   class="' + updateFlag + 'btn btn-info btn-xs " href="#" onclick="edit(\'' + row.id + '\')"><i class="fa fa-edit"></i> 编辑</a> ');
                    return actions.join('');
                }
            }
        ],
        onExpandRow: function (index, row, $detail) {

            $("#workTime .attendMorStart").html($.common.dateFormatGetTimeSort(row.attendMorStart) == null ? '<span style="color: red">未签</span>' : $.common.dateFormatGetTimeSort(row.attendMorStart));
            $("#workTime .attendMorleave").html($.common.dateFormatGetTimeSort(row.attendMorLeave) == null ? '<span style="color: red">未签</span>' : $.common.dateFormatGetTimeSort(row.attendMorLeave));
            $("#workTime .attendAfterStart").html($.common.dateFormatGetTimeSort(row.attendNoonStart) == null ? '<span style="color:red">未签</span>' : $.common.dateFormatGetTimeSort(row.attendNoonStart));
            $("#workTime .attendAfterleave").html($.common.dateFormatGetTimeSort(row.attendNoonLeave) == null ? '<span style="color:red">未签</font>' : $.common.dateFormatGetTimeSort(row.attendNoonLeave));

            btn.CalculationAttend(row.id, $detail);
        }

    })
function edit(id) {
    $.modal.open("修改考勤记录", '/attend/edit/'+id);
}

</script>
</body>
</html>